<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
</head>

<body>
    <!-- 
        使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
        因此，用 v-on:click.prevent.self 会阻止所有的点击，
        而 v-on:click.self.prevent 只会阻止对元素自身的点击。 
    -->

    <div id="demo">
        <!-- .once 使事件只触发一次 -->
        <a href="javascript:void(0);" v-on:click.once="doThis">子洋Blog</a>
    </div>

    <div id="demo2">
        <!-- 
            使用 keyCode 特性也是允许的：

            <input v-on:keyup.13="submit">

            为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

                .enter
                .tab
                .delete (捕获“删除”和“退格”键)
                .esc
                .space
                .up
                .down
                .left
                .right
         -->

        <input v-on:keyup.enter="onPageDown()"></button>
        <input v-on:keyup.13="onPageDown()"></button>
        <!-- 
        你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

        可以使用 `v-on:keyup.f1`
        Vue.config.keyCodes.f1 = 112 
        -->
    </div>

    <div id="demo3">
        <!-- 
            可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

            .ctrl
            .alt
            .shift
            .meta 
        -->
        <input type="text" @keyup.alt.67="clear" v-model="message">
        <input type="text" @keyup="onkeyup($event)" v-model="message2">
        <input type="text" @click.ctrl="doSometh" v-model="message3">
    </div>

    <div id="demo4">
        <!-- .exact 修饰符-->

        <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
        <button @click.ctrl="onClick">A</button>

        <!-- 有且只有 Ctrl 被按下的时候才触发 -->
        <button @click.ctrl.exact="onClick">A</button>

        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button @click.exact="onClick">A</button>
    </div>

    <!-- 为什么在 HTML 中监听事件?

        你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。
        但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，
        它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

        扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

        因为你无须在 JavaScript 里手动绑定事件，
        你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

        当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
    -->
    <script>
        new Vue({
            el: demo,
            data: {
                href: "http://www.ismepangcy.xyz"
            },
            methods: {
                doThis: function() {
                    alert("点击了！！")
                }
            }
        });

        new Vue({
            el: demo2,
            methods: {
                onPageDown: function() {
                    alert("触发了回车")
                }
            }
        })

        new Vue({
            el: demo3,
            data: {
                message: "Alt + C 清空",
                message2: "键盘事件响应",
                message3: "点击 + ctrl事件响应"
            },
            methods: {
                clear: function() {
                    this.message = null
                },
                onkeyup: function(evet) {
                    console.log(event)
                },
                doSometh: function() {
                    alert("ctrl 事件触发")
                }
            }
        })

        new Vue({
            el: demo4,
            methods: {
                onClick: function() {
                    alert("事件触发")
                }
            }
        })
    </script>
</body>

</html>